// 定义图片懒加载插件

// useIntersectionObserver 可以用于判断指定元素是否进入到页面的可视区域
import { useIntersectionObserver } from '@vueuse/core'    // 使用前需要执行 npm i @vueuse/core 指令来安装这个包

export const lazyPlugin = {
    install(app){
        // 懒加载指令逻辑
        app.directive('img-lazy',{  // 这里是定义一个自定义指令，类似于 v-bind，每一个指令都有它自己的功能
            mounted(el,binding){
                // el：指令绑定的指定元素
                // binding：binding.value 指令等于号后面绑定的表达式的值
                // console.log(el,binding.value);
                const { stop } = useIntersectionObserver(   // 将stop方法解构出来
                    el, // el 是要被监听的元素
                    ([{ isIntersecting }]) => { // 如果 el 对应的元素进入到可视区域，那么 isIntersecting 值为true，反之则为false
                        // console.log(isIntersecting);
                        if(isIntersecting){
                            // 由于这个自定义指令被用在了img标签上，所以这里的el是指定的img标签实例，bing.value是指令后面的值，也就是图片路径
                            // 当img标签进入可视区域时，才将图片路径赋值给img标签的src属性，这样可以实现图片的懒加载
                            el.src = binding.value
                            stop    // stop 的作用是停止监听指定元素，当指定元素进入可视区域后就停止监听这个元素
                        }
                    }
                )
            }
        })
    }
}